<template>
	<view>
	<view class="home">
		<view class="tab">
			<scroll-view class="tab-scroll" scroll-x>
				<view class="tab-scroll-box">
					<view v-for="(item,index) in orderList" :key="index" class="tab-scroll-item" :class="{active:activeIndex===index}" @click="clickTab(item,index)">{{item}}</view>
				</view>
			</scroll-view>
		</view>
		<view class="scroll">
			<scroll-view  class="list-scroll" scroll-y='true'>
				<view v-for="item in ordersList">
					<order-card :order="item" ></order-card>
				</view>
			</scroll-view>
		</view> 
		
	</view>
	<uni-popup ref="helpbox" type="center">
		<view class="help-pop">
			<view class="pop-title">评价</view>
			<view class="pop-content">
				<input v-model="comparam.comtext" focus placeholder="请输入评价(不超过50词)" maxlength="50"/>
			</view>
			<button class="pop-bottom" @click="sucessbtn()">提交</button>
		</view>
	</uni-popup>
	</view>
</template>

<script>
	import getDateTime from "@/common/getDateTime.js"
	export default {
		data() {
			return {
				orderList:['全部','代发货','待收货','待评价','退款/售后'],
				activeIndex:0,
				ordersList:[],
				params:{
					uid:'',
					typeid:0
				},
				orderp:{					
					typeid:0,
					orderid:1,
				},
				comparam:{
					uid:'',
					comtext:"",
					leafid:1,
					leafnum:"",
					typeid:0,
					date:""
				}
				
				
			}
		},
		onLoad(){
			this.params.uid=this.$baseName.user.userid
			this.comparam.uid=this.$baseName.user.userid
			this.getOrdersShop()
		},
		onShow(){
			let oditem = uni.getStorageSync('d');
			console.log("onshow传来的值",oditem)
			uni.removeStorageSync('d');
			if(oditem){	
				this.activeIndex=oditem.odval
				this.params.typeid=this.activeIndex
				this.getOrdersShop()	
			}
			
		},
		methods: {
			changBtn(data,id,ld,dn){
				if(data==0){
					this.orderp.orderid=id
					this.orderp.typeid=0
					this.comparam.leafid=ld
					this.comparam.leafnum=dn
					this.comparam.date=getDateTime.dateTimeStr('y-m-d h:i:s')
					this.openpop()
					this.changeOrder()
					this.addComment()
					
				}else if(data==1){
					this.orderp.orderid=id
					this.delOrder()
				}else if(data==2){
					this.orderp.orderid=id
					this.orderp.typeid=4
					this.changeOrder()
					return uni.showToast({
						title:'申请成功'
					})
				}else{
					//收货
					this.orderp.orderid=id
					this.orderp.typeid=3
					this.changeOrder()
					return uni.showToast({
						title:'收货成功'
					})
				}
			},
			openpop(){
				this.$refs.helpbox.open()
			},
			closepop(){
				this.$refs.helpbox.close()
			},
			sucessbtn(){
				//更改订单状态，并添加评价				
				this.addComment()
				this.closepop()
			},	
			//删除订单
			delOrder(){
				uni.request({
					url:this.$baseUrl+'order/update',
					//传递参数
					data:this.orderp,
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
						return uni.showToast({
							title:'取消订单成功'
						})
					}
				})
			},
			//更改订单状态的方法
			changeOrder(){
				uni.request({
					url:this.$baseUrl+'order/update',
					//传递参数
					data:this.orderp,
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
					}
				})
			},
			//添加=评论
			addComment(){
				uni.request({
					url:this.$baseUrl+'comment/add',
					//传递参数
					method: 'POST',
					data:this.comparam,
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
					}
					
				})
			},
			clickTab(item,index){
				console.log(index)
				console.log(item)	
				this.activeIndex=index
				this.params.typeid=index
				
				this.getOrdersShop()
			},
			//代发货列表
			getOrdersShop(){
				uni.request({
					url:this.$baseUrl+'order/get',
					//传递参数
					data:this.params,
					success:res=>{
						if(res.statusCode!=200){
							return uni.showToast({
								title:'获取数据失败'
							})
						}
						console.log(res.data)
						this.ordersList=res.data.list
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	page{
		height: 100%;
		display: flex;
		
	}
	.home{
		display: flex;
		flex-direction: column;
		//垂直排列
		flex:1;
		.tab{
			display: flex;
			height: 50px;
			width: 100;
			border-bottom: 1px #3F536E solid;
			background-color: #fff;
			box-sizing: border-box;
			position: sticky;
			
			.tab-scroll{
				//tab盛满整个元素
				flex: 1;
				overflow: hidden;
				box-sizing: border-box;
				// border: 1px red solid;
				.tab-scroll-box{
					display: flex;
					height: 45px;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;
					// background: #8EB981;
					.tab-scroll-item{
						flex-shrink: 0;
						padding: 5px 16px;
						color: #333333;
						font-size: 14px;
						//background: #C0C0C0;
						//border: 1px #808080 solid;
						//background: #8EB981;
						&.active{
							color: #ff6200;
						}
					}
				}
			}
		}
		.scroll{
				flex:1;		
				overflow: hidden;	
				box-sizing: border-box;
				.list-scroll{
					height: 100%;		
					display: flex;						
					flex-direction: column;
					
				}
			}
			
	}
	.help-pop{
		background: white;
		width: 300px;
		height: 200px;
		.pop-title{
			text-align: center;
			height: 30px;
			font-size: 17px;
			background: #bde2ae;
			margin-bottom: 20px;
		}
		.pop-content{
			background: #eaece4;
			height: 100px;
		}
		.pop-bottom{
			margin-top: 46px;
			background: #eec188;
			height: 40px;
			text-align: center;
			font-size: 18px;
		}
	}
</style>

